<template>
   <div class="keyboard">
     <div v-for="keys in keyList" :key="keys.id" class="keyboard_con">
        <div v-for="key in keys" :key="key.id" class="keyboard_f">
          <i v-if="key === 'top'" @click.stop="clickKey" @touchend.stop="clickKey" class="iconfont icon-zhiding tab-top"></i>
          <i v-else-if="key === '123'" @click.stop="clickKey" @touchend.stop="clickKey" class="tab-num">123</i>
          <i v-else-if="key === 'del'" @click.stop="clickKey" @touchend.stop="clickKey" class="iconfont icon-delete1 key-delete"></i>
          <i v-else-if="key === 'blank'" @click.stop="clickKey" @touchend.stop="clickKey" class="iconfont icon-konggejian-jianpanyong tab-blank"></i>
          <i v-else-if="key === 'symbol'" @click.stop="clickKey" @touchend.stop="clickKey" class="tab-symbol">符</i>
          <i v-else-if="key === 'point'" @click.stop="clickKey" @touchend.stop="clickKey" class="tab-point">·</i>
          <i v-else-if="key === 'enter'" @click.stop="clickKey" @touchend.stop="clickKey" class="iconfont icon-huiche tab-enter"></i>
          <i v-else @click.stop="clickKey" @touchend.stop="clickKey">{{key}}</i>
          </div>
       </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyList: [],
      status: 0, // 0 小写 1 大写 2 数字 3 符号
      lowercase: [
        ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
        ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
        ['top', 'z', 'x', 'c', 'v', 'b', 'n', 'm', 'del'],
      ],
      uppercase: [
        ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
        ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
        ['top', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', 'del'],
      ],
      equip: !!navigator.userAgent.toLocaleLowerCase().match(/ipad|mobile/i), // 是否是移动设备
    };
  },
  props: {
    option: {
      type: Object,
    },
  },
  computed: {
    showKeyboard() {
      return this.option.show;
    },
  },
  mounted() {
    this.keyList = this.lowercase;
  },
  methods: {
    tabHandle({ value = '' }) {
      if (value.indexOf('tab-num') > -1) {
        this.status = 2; // 数字键盘数据
      } else if (value.indexOf('key-delete') > -1) {
        this.emitValue('delete');
      } else if (value.indexOf('tab-blank') > -1) {
        this.emitValue(' ');
      } else if (value.indexOf('tab-enter') > -1) {
        this.emitValue('\n');
      } else if (value.indexOf('tab-point') > -1) {
        this.emitValue('.');
      } else if (value.indexOf('tab-symbol') > -1) {
        this.status = 3;
      } else if (value.indexOf('tab-top') > -1) {
        if (this.status === 0) {
          this.status = 1;
          this.keyList = this.uppercase;
        } else {
          this.status = 0;
          this.keyList = this.lowercase;
        }
      } else {
      }
    },
    clickKey(event) {
      if (event.type === 'click' && this.equip) return;
      const value = event.srcElement.innerText;
      value && value !== '符' && value !== '·' && value !== '123'
        ? this.emitValue(value)
        : this.tabHandle(event.srcElement.classList);
    },
    emitValue(key) {
      this.$emit('keyVal', key);
    },
    closeModal(e) {
      if (e.target !== this.option.sourceDom) {
        // this.showKeyboard = false
        this.$emit('close', false);
      }
    },
  },
};
</script>
<style scoped>
.keyboard {
  width: 100%;
  border-radius: 0.1rem;
  padding-top: 0.2rem;
  background-color: #e5e6e8;
  user-select: none;
  z-index: 999;
  pointer-events: auto;
}
.keyboard_con {
  margin: 0 auto;
  height: 2.2rem;
  margin-bottom: 0.1rem;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}
.keyboard_f i {
  width: 2rem;
  display: block;
  height: 2rem;
  line-height: 2rem;;
  font-style: normal;
  font-size: 1.4rem;
  border-radius: 0.2rem;
  background-color: #fff;
  text-align: center;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}
.keyboard_f i:active {
  background-color: #b3b3b3;
}
.keyboard_con .tab-top {
  width: 3rem;
  margin: 0 0.1rem;
  background: #cccdd0;
  color: #fff;
  font-size: 1.4rem;
}
.keyboard_con .key-delete {
  width: 3.2rem;
  margin: 0 0.1rem;
  color: #827f7f;
}
.keyboard_con:nth-child(2){
  width: 88%
}
</style>
